<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
 
<script type="text/javascript">

	function updateContact(){
		var isValid = $("#contact_james").valid();
		if(isValid){
			var arrayObj = new Array();
			var flag = false;
			//清除所有报错信息
			$("#contact_james").find(".contact_list").find("#errorNotice").html("");
			//验证每条信息
			$("#contact_james").find(".contact_list").each(function() {
				if($(this).find("#contactName").val().length>20){
					$(this).find("#errorNotice").html("标题不能超过20个字符");
					flag = true;
				}else if($(this).find("#contactValue").val().length>50){
					$(this).find("#errorNotice").html("内容不能超过50个字符");
					flag = true;
				}
				arrayObj.push({
					"name" : $(this).find("#contactName").val(),
					"value" : $(this).find("#contactValue").val()
				});
			});
			if(flag){
				return;
			}
			var detail = new DetailAll();
			detail.email = $("#email").val();
			detail.provice = $("#now_province").val();
			detail.city = $("#now_city").val();
			detail.district = $("#now_district").val();
			detail.address = $("#address").val();
			detail.zipcode = $("#zipcode").val();
			detail.phone = $("#phone").val();
			detail.mobilephone = $("#mobilephone").val();
			detail.qq = $("#qq").val();
			detail.msn = $("#msn").val();
			detail.contactList = arrayObj;
			$("#delButton").attr("onclick","");
			$.ajax({
				type : 'post',
				url : 'saveContact.htm?memberId='+$("#memberId").html(),
				data : {
					jsonData : escape($.toJSON(detail))
				},
				success : function(data) {
					if (data == 'success') {
						$("#member_info_detail").load("enterContact.htm?memberId="+$("#memberId").html(),function(){
							showSuccess();
						});
						$("#gxzl5").attr("class", "current");
					}
				}
			});
		}
		
	}
	
	$("#goon").click(function() {
		$("#append").append($("#tianJia").html());
	});

	//删除联系方式
	function deleteContact(id) {
		$("#"+id).remove();
	}

	//加载初始化
	$(function() {
		
		//绑定回车事件
		$(':input').bind('keyup', function(event){
		   if (event.keyCode=="13"){
			   updateContact();
		   }
		});
		
		initProCityDis('now_province', 'now_city', 'now_district');
		$("#now_province").val("${detail.provice}");
		changeProvince("now_province", "now_city");
		$("#now_city").val("${detail.city}");
		changeCity("now_city", "now_district");
		$("#now_district").val("${detail.district}");
		
		$.metadata.setType("attr","validate");
		$("#contact_james").validate();
	});
	
	//小试牛刀
	function hideTitleError(self){
		$(self).parent().parent().find("#errorNotice").html("");
	}
	function showTitleError(self){
		if($(self).val().length>20){
			$(self).parent().parent().find("#errorNotice").html("标题不能超过20个字符");
		}else if($(self).parent().parent().find("#contactValue").val().length>50){
			$(self).parent().parent().find("#errorNotice").html("内容不能超过50个字符");
		}
	}
	function hideContentError(self){
		$(self).parent().parent().find("#errorNotice").html("");
	}
	function showContentError(self){
		if($(self).val().length>50){
			$(self).parent().parent().find("#errorNotice").html("内容不能超过50个字符");
		}else if($(self).parent().parent().find("#contactName").val().length>20){
			$(self).parent().parent().find("#errorNotice").html("标题不能超过20个字符");
		}
	}
	
</script>
 
<div class="success" id="base_info_tip_success" style="display: none; margin-left: 32px;"><img alt="修改成功" src="<%=basePath %>images/home_images/ico29.png">联系方式修改成功</div>
<form action="" id="contact_james">
	<div class="h_PI">
		<table id="append">
			<tr>
				<td width="84" class="PI_text">E-mail：</td>
				<td width="600"><input type="text" id="email" name="email" value="${detail.email }" 
				validate="{email:true ,messages:{email:'请输入正确的email格式'}}"/></td>
			</tr>
			<tr>
				<td class="PI_text">地址：</td>
				<td><select id="now_province"></select> <select id="now_city"></select>
					<select id="now_district"></select> </td>
			</tr>
			<tr>
				<td class="PI_text">详细地址：</td>
				<td><input type="text" id="address"
					value="${detail.address }" size="10" name="address" validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/></td>
			</tr>
			<tr>
				<td class="PI_text">邮编：</td>
				<td><input type="text" id="zipcode" value="${detail.zipcode }" name="zipcode" validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/>
				</td>

			</tr>
			<tr>
				<td class="PI_text">电话：</td>
				<td><input type="text" id="phone" value="${detail.phone }" name="phone"  validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/>
				</td>
			</tr>
			<tr>
				<td class="PI_text">手机：</td>
				<td><input type="text" id="mobilephone"
					value="${detail.mobilephone }" name="mobilephone" validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/>
				</td>

			</tr>
			<tr>
				<td class="PI_text">QQ：</td>
				<td><input type="text" id="qq" value="${detail.qq }" name="qq"  validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/>
				</td>
			</tr>
			<tr>
				<td class="PI_text">MSN：</td>
				<td><input type="text" id="msn" value="${detail.msn }"  name="msn" validate="{maxlength:30,messages:{maxlength:'长度不能超过30个字符'}}"/>
				</td>
			</tr>
			<c:forEach items="${requestScope.contactList }" var="contact">
				<tr class="contact_list" id="delete${contact.id }">
					<td class="PI_text">${contact.name }：<input
						type="hidden" value="${contact.name }" onfocus="hideTitleError(this)" onblur="showTitleError(this)"  id="contactName">
					</td>
					<td><input type="text" value="${contact.value }"
						id="contactValue"  onfocus="hideContentError(this)" onblur="showContentError(this)" /> <span style="cursor: pointer;" 
						 onclick="deleteContact('delete${contact.id }')">删除</span>
						 <div style="color: red; display: inline;" id="errorNotice"></div></td>
				</tr>
			</c:forEach>
		</table>
		<table>
			<tr>
				<td class="add_news fl" colspan="2"><img
					src="<%=basePath%>images/home_images/HI_01.gif" alt="添加个性信息" /><a
					href="javascript:void(0);" id="goon">添加联系方式</a>
				</td>
			</tr>
		</table>
	</div>
	<table>
       <tr>
         <td width="145"></td>
         <td width="524">
         <div class="h_button w75 mt15"><strong id="delButton" onclick="updateContact()">保存设置</strong></div>  
       </td>
       </tr>
     </table>
</form>
<table id="tianJia" style="display: none">
			<tr class="contact_list">
				<td><input type="text" class="PI_category" id="contactName" onfocus="hideTitleError(this)" onblur="showTitleError(this)" style="padding:0;" name="contactName"  />：</td>
				<td><input type="text" class="PI_content" id="contactValue" onfocus="hideContentError(this)" onblur="showContentError(this)" style="padding:0;" name="contactValue"  /> 
				<div style="color: red; display: inline;" id="errorNotice"></div>
				</td>
			</tr>
		</table>
